﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<base href="<%=basePath%>">
<title>素材</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/video/adapter-latest.js"></script>
<script type="text/javascript" src="js/video/audio.js"></script>
<style>
		body{
			background-image: none;
		}
		.backimg{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}.backimg img{
			width: 100%;
			height: 100%;
		}
		#content{
			position: relative;
			width: 90%;
			margin: 10px auto 0px auto;
			height: 90%;
		}
		.videodiv{
			position: relative;
			width:100%;
			background: rgba(255,255,255,0.5);
			margin-top: 2%;
			box-sizing: border-box;
			border:5px solid #0afcfe;
		}.videodiv video{
			position: relative;
			width: 100%;
		}
		.rightdiv{
			position: relative;
			float: right;
			width: 30%;
		}.rightdiv .artType{
			position: relative;
			width: 100%;
			background: rgba(255,255,255,0.5);
		}
		
		.rightdiv .artType img{
			position: relative;
			float: left;
			width: 40%;
			margin:0 1% 0 4%;
		}.rightdiv .artType p{
			position: relative;
			float: left;
			padding-left:6%;
			width: 49%;
			font-size: 40px;
			text-align: left;
		}
		.artauto{
			position: relative;
			float: left;
			width: 65%;
			border: 5px solid #0afcfe;
		} .artauto marquee{
			line-height:60px;
			margin-top:40px;
			text-align: center;
			font-size: 36px;
		}.artauto p{
			margin-top:16%;
			height:40px;
			font-size: 40px;
			text-align: center;
		}
</style>
</HEAD>


<body style="text-align: center">
	<div class="backimg">
		<img src="css/style2/img/ds_back.png" />
	</div>
	<div id="content">
		<div class="artauto">
				<p id="artittle">${material.title}</p>
				<marquee direction="up" scrolldelay="100" behavior="scroll"
				 scrollamount="2" width="60%" height='40%'>${material.content
					}</marquee>
			</div>
		
		
		<div class="rightdiv">
			<div class="artType">
				<img src="css/style2/img/literature.png" />
				<p>诗歌</p>
			</div>
			<div class="videodiv">
				<video id="video_box" autoplay muted></video>
			</div>

		</div>
		<div class="clear"></div>
	</div>
	<script type="text/javascript">
		getMedia(3);
		$(function() {
			heightAuto();
		});
		function heightAuto() {
			var wH=$(window).height();
		var vbox=$("#video_box");
		var vdiv=vbox.parent();
		var vbh=vbox.height();
		var rdiv=$(".rightdiv");
		var atype=rdiv.find(".artType");
		var aauto=$(".artauto");
		rdiv.css({"height":wH*0.8+"px","margin-top":wH*0.12+"px"});
		atype.height(rdiv.height()*0.4);
		atype.find("p").css("line-height",rdiv.height()*0.4+"px");
		var aimg=atype.find("img");
		aimg.css("margin-top",(rdiv.height()*0.4-aimg.width())/2+"px");
		aauto.css({"height":wH*0.8+"px","margin-top":wH*0.08+"px"});
		}
	</script>

</body>
</HTML>

